<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/scroll.css">
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/detail.css">
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/Components.css">
<script src="__TEMP__/{$style}/public/js/scroll.js" type="text/javascript"></script>
<script src="__TEMP__/{$style}/public/js/countdown.js" type="text/javascript"></script>
<style type="text/css">
.productproperty-list{
	float: left;
    font-size: 14px;
    cursor: pointer;
    color: #656565;
	width:20%;
}
.tab-nav .icon{
    display: inline-block;
    width: 14px;
    height: 14px;
    background-position: -61px 0px;
    vertical-align: -2px;
    margin-right: 5px;
}
#comment_content{
	padding:10px;
}
.user_info{
	width:20%;
	text-align:center;
}
.face{
    height: 35px;
/*     width: 35px; */
/*     border-radius: 50%; */
/*     border: 1px solid #e5e5e5; */
/*     overflow: hidden; */
}
.tablelist:after{
	content:'';
	clear:both;
	display:block;
}
.tablelist .user_info{
	float:left;
}
.tablelist dl{
	float:right;
	width: 75%;
	line-height:25px;
}
.current{
	color:#f03737;
}
.comment-type ul{
	display: inline-block;
	width: 100%;
}
.comment-type ul li{
	width: 20%;
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.shop_slider_auto .pic_list li div{
	text-align: center;
	width:100%;
	height:360px;
}
</style>
<!-- 商品详情 -->
<div class="h50" style="height:45px;"></div>
<section id="banner">
	<div class="shop_slider shop_slider_auto" data-tag="module-slider" data-height="320px">
		<div class="inner" data-tag="slider-warp" >
			<ul class="pic_list" data-tag="slider-list">
			{foreach name = "goods_detail['img_list']" item = 'img_list' key='key' }
				<li data-index="0" style="width: 640px; left: 0px;-webkit-transition: 300ms;transition: 300ms;-webkit-transform: translate(0px, 0px) translateZ(0px);{if condition="$key!=0"}display:none;{/if}">
					<!-- <a href="#" target="_blank" title="图片"> -->
					<div >
						<img alt="图片" class="pp_init_img" src="__ROOT__/{$img_list.pic_cover_big}">
					</div>
					<!-- </a> -->
				</li>
			{/foreach}
			</ul>
		</div>
		<div class="bar_wrap">
			<ul class="bar" data-tag="slider-page">
				<li class="cur"></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</section>
<input type="hidden" id="is_sale" value="{$goods_detail.state}" />
<input type="hidden" id="goods_id" value="{$goods_detail.goods_id}" />
<input type="hidden" id="code" value="{$goods_detail.code}" />
<input type="hidden" id="max_buy" value="{$goods_detail.max_buy}" />
<input type="hidden" id="hidden_current_num" value="{$num}" />
{if condition = "$goods_detail['promotion_info'] neq ''"}
<div class="goods-header js-goods-header goods-activity clearfix">
	<input type="hidden" id="end_time"  value="{$goods_detail['promotion_detail']['end_time']}"/>
	<div class="goods-price ">
		<div class="current-price activity-price">
			<span>￥</span><i class="js-goods-price price">{$goods_detail.promotion_price}<!-- <i>.00</i> --></i>
			<span class="price-title js-price-title ">限时折扣</span>
		</div>
		<em class="original-price">{$goods_detail.price}</em>
		<div class="font-size-12 overview-countdown js-activity-tips started " data-status="started">
			<div class="countdown-title">距结束仅剩</div>
			<div class="js-discount-time countdown" data-countdown="3542691">
			<span class="c-red js-day">00</span> 天 
			<span class="c-red js-hour">00</span> 时 
			<span class="c-red js-min">00</span> 分 
			<span class="c-red js-sec">00</span> 秒</div>
		</div>
	</div>
</div>
{/if}
<div class="buy_area">
	<div class="fn_wrap">
		<h1 class="title" id="itemName">{$goods_detail.goods_name}</h1>
	</div>
	<div class="price_wrap">
		<span class="tit" id="priceTitle"></span> 
		<span class="price" price="{if condition = "$goods_detail['promotion_info'] neq ''"}{$goods_detail.promotion_price}{else/}{$goods_detail.price}{/if}">
			<span style="font-size:14px;display: inline-block;vertical-align: middle;">￥</span>
			{$goods_detail.promotion_price}
			{if condition="$goods_detail.point_exchange_type==1 && $goods_detail.point_exchange>0"}
			<span style="font-size:16px;display: inline-block;vertical-align: middle;">+{$goods_detail.point_exchange}积分</span>
			{/if}
		</span>
		<del class="old_price"><em id="priceMarket" style="">¥<span id="cost_price">{$goods_detail.price}</span></em></del>
		<span class="flag" id="priceDis" style="display: none"></span>
	</div>
	
	{if condition="$goods_detail.max_buy>0"}
	<hr class="with-margin-l" />
	<hr class="divider-line" />
	<div class="price_postage">
		<span class="price_postage_tit">
		<i style="color: #fff;font-size: 12px;padding: 3px;background: #f44;border-radius: 2px;">限购数量</i>&nbsp;{$goods_detail.max_buy}个</span>
	</div>
	{/if}
	<hr class="with-margin-l" />
	<div class="stock-detail" >
		<span class="price_postage_tit">运费：{$goods_detail['shipping_fee_name']}</span>
	</div>
</div>
<hr class="with-margin-l" />
<hr class="divider-line" />
{if condition = "$goods_detail['mansong_name'] neq ''"}
<div class="price_postage">
	<span class="price_postage_tit js-reduced-send single"><i style="color: #fff;font-size: 12px;padding: 3px;background: #f44;border-radius: 2px;">满减</i>&nbsp;{$goods_detail['mansong_name']}</span>
</div>
<hr class="with-margin-l" />
<hr class="divider-line" />
{/if}

{if condition = "$goods_detail['give_point'] neq 0"}
<div class="price_postage">
	<span class="price_postage_tit"><i class="fa fa-database" style="color: #F44;margin-right: 5px;"></i>赠送积分<span style="color:#F44;padding:0;">{$goods_detail['give_point']}</span>分</span>
</div>
<hr class="with-margin-l" />
{/if}
    
    <div class="likeshare" style="display:none;">
		<span class="span-like">
    		<i class="icon-good" id="clickGood" typeid="1" is_click = '0' style='background: url("__TEMP__/{$style}/public/images/dianzan1.png") no-repeat 5px 5px;'></i>点赞
		</span>
		<span class="span-share">
			<i class="icon-share" id="clickShare" typeid="2" style='background: url("__TEMP__/{$style}/public/images/fenxiang1.png") no-repeat 5px 5px;'></i>分享
		</span>
	</div>
	
	<div class="statistics" style="display:none;">
		<div class="cols">销量:<i>{$goods_detail['sales']}</i></div>
			<div class="cols">
				点赞:<i id="goodNum">{$goods_detail['evaluates']}</i>
				<input type="hidden" id="hiddenGoodNum" value="{$goods_detail['evaluates']}">
			</div>
			<div class="cols">
				分享:<i id="shareNum">{$goods_detail['shares']}</i>
				<input type="hidden" id="hiddenshareNum" value="{$goods_detail['shares']}">
			</div>
	</div>
	
	<div class="mod_tab_wrap">
		<div class="mod_tab" id="detailTab">
			<span onclick="showProperty(this,1)" class="cur">{$goods_detail.introduction}</span>
			<span onclick="showProperty(this,2)">商品评价</span>
		</div>
	</div>
	
<!-- 	<section class="p-a-c-list"> -->
<!-- 		<ul class="list-attribute" id="productproperty" style="display: none;"></ul> -->
<!-- 	</section> -->
	<!-- 商品详情 -->
	<div class="detail_info_wrap" id="p-detail">
		<div class="detail_list" id="content">{$goods_detail.description}</div>
	</div>
	<!-- 商品评论 -->
	<div class="comment-type" id="productproperty" style="display:none;">
		<ul class="tab-nav">
			<li class="productproperty-list current" data-type="0" >全部<em>({$evaluates_count['evaluate_count']})</em></li>
			<li class="productproperty-list" data-type="4"  >图片 <em>({$evaluates_count['imgs_count']})</em></li>
			<li class="productproperty-list" data-type="1" >好评 <em>({$evaluates_count['praise_count']})</em></li>
			<li class="productproperty-list" data-type="2" >中评 <em>({$evaluates_count['center_count']})</em></li>
			<li class="productproperty-list" data-type="3" > 差评 <em>({$evaluates_count['bad_count']})</em></li>
	    </ul>
	</div>
	
	
	
	
	<!-- 评论展示 -->
	<div id="comment_content">
		<div class="comment-con "></div>
	</div>
	<div class="footer">
		<!-- <div class="copyright">
			<a href="#" target="_blank">店铺主页</a>
			<a href="#" target="_blank">会员中心</a>
			<a href="#">关注我们</a>
			<a href="#" target="_blank">线下门店</a>
			<a href="#" target="_blank">店铺信息</a> -->
			<!-- 第三方app隐藏topbar时，需要在底部显示购物记录入口 -->
		<!-- </div> -->
		<!-- <div class="ft-copyright "><a href="http://www.niushop.com.cn" target="_blank">{$platform_shopname}提供技术支持</a></div> -->
	</div>
	
	<div class="success-tip-line" id="success_tip_line" style="display: none;">成功加入购物车！</div>
	<div class="mask" id="mask" style="display: none;"></div>
	<span class="" id="addcart_way" style="display: none;"><i></i></span>
	<section class="s-buy" id="s_buy" style="bottom: -800px; display: none;">
		<div class="popup"  id="popup" style="-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;display: none"></div>
		<ul class="s-buy-ul">
			<li class="s-buy-pro">
				<span class="pro-img">
					<input type="hidden" id="default_img" value="{$goods_detail['img_list'][0]['pic_id']}" />
					<img src="__ROOT__/{$goods_detail['img_list'][0]['pic_cover_micro']}" >
				</span>
				<div class="pro-info">
					<p class="name" >{$goods_detail.goods_name}</p>
					<p class="pro-price" id="price">￥{$goods_detail.promotion_price}</p>
				</div>
				<i class="icon-close" id="icon_close"></i>
			</li>
		</ul>
		<hr class="with-margin-l" />
		<ul class="s-buy-ul specification" id="specification">
			{foreach name="goods_detail['attribute_list']" item="pro_prop" key="k"}
			<li class="s-buy-li" >
				<div class="left">{$pro_prop.attr_name}：</div>
				<div class="right" name="specvals" >
				{foreach name="goods_detail['attribute_value_list']" item="pro_propvalue"}
					{if condition="$pro_propvalue['attr_id'] eq $pro_prop['attr_id']"}
						<button class="select" name="Span{$k}" id="{$pro_prop.attr_id}:{$pro_propvalue.attr_value_id}" onclick="change(this);">
						{$pro_propvalue.attr_value}
						</button>
					{/if}
				{/foreach}
				</div>
			</li>
			<hr class="with-margin-l" />
			{/foreach}
			{foreach name="goods_detail['sku_list']" item="pro_skus" key="k"}
			<input type="hidden" id="goods_sku{$k}" value="{$pro_skus.attr_value_items};" stock="{$pro_skus.stock}" price="{$pro_skus.promote_price}" skuid="{$pro_skus.sku_id}" skuname="{$pro_skus.sku_name}">
			{/foreach}
			<input type="hidden" id="goods_sku_num" value="100">
			<li class="s-buy-li">
				<div class="left" style="float:left;">购买数量：</div>
				<div class="right">
					<span class="reduce quantity-minus-disabled">-</span>
					<input class="number" name="quantity" autocomplete="off" value="1" min="1" max="{$goods_detail.stock}" id="num">
					<span class="add">+</span>
					<input id="hiddPDetailID" type="hidden" name="name" value="{$goods_detail.goods_id}">
					<input id="hiddSkuId" type="hidden" name="name" value="">
					<input id="hiddSkuName" type="hidden" name="name" value="">
					<input id="hiddSkuprice" type="hidden" name="name" value="">
					<input id="hiddStock" type="hidden" value="{$goods_detail.stock}"/>
				</div>
				<span style="display: inline-block;margin-top:5px;color:#333;" id="Stock">剩余{$goods_detail.stock}件</span>
				{if condition ="$goods_detail['max_buy'] neq '0' AND $goods_detail['max_buy'] neq -1"}
				<span style="display: inline-block;margin-top:5px;color:#333;">限购{$goods_detail['max_buy']}件</span>
				{/if}
			</li>
		</ul>
		<ul class="s-buy-ul">
			<li class="s-buy-btn">
				<a class="btn" id="submit_ok" tag="buyBtn1">确定</a>
				<input type="hidden" id="hidden_shop_name" value="{$goods_detail.shop_name}"/>
				<input type="hidden" id="hidden_shop_id" value="{$goods_detail.shop_id}"/>
			</li>
		</ul>
	</section>
	<script type="text/javascript">
	window.onload=function(){
		$('.pic_list li').show();
	}
	$(".comment-type li").click(function() {
		var type = $(this).data("type");
		//alert(type);
		var target = $(this);
		$(".comment-type").find("li").removeClass("current");
		$(".comment-type").find("i").removeClass("cur");
		$(target).addClass("current");
		$(target).children().addClass("cur");
		GetDataList();
	})
	
	
	function showProperty(sobj,type){
		$("#detailTab span").removeClass("cur");
		$(sobj).addClass("cur");
		if(type==1){
			$("#productproperty").hide();
			$("#p-detail").show(); 
		}else{
			$("#productproperty").show();
			$("#p-detail").hide(); 
			GetDataList();
		}
	}
	
	
	/**
	* 分页显示
	* @param {Object} pageindex
	*/
	function GetDataList(){
		var commentsType=$(".comment-type li.current").attr('data-type');
		$.ajax({
			type:"post",
			url:"APP_MAIN/Goods/getGoodsComments",
			data:{'comments_type' : commentsType, "goods_id" : $("#goods_id").val() },
			dataType:'json',
			
			success:function(data){
// 				alert(JSON.stringify(data));
				var listhtml='';
				if(data['data'].length==0){
					$('.comment-con').html('<div class="tip-box"><i class="tip-icon"></i><div class="tip-text">还没有任何评价哦</div></div>');
					$('#pagination').hide();
					return false;
				}
				for(var i=0;i<data['data'].length;i++){
					var dataitem=data['data'][i];
					var member_name=dataitem['member_name'];
					member_name=dataitem['is_anonymous']==1?member_name.replace(member_name.substring(1,member_name.length),'***')+'(匿名)':member_name;
					listhtml+=' <div class="tablelist" style="border-bottom: 1px solid #e5e5e5;margin-bottom: 10px;">'
						+'<div class="user_info" style="margin-right:10px;">'
						+'<div class="face"><img src="__TEMP__/{$style}/public/images/default_user_portrait_0.png" style="width:35px;border-radius: 50%;"/></div>'
						+'<div class="name-box">'+member_name+'</div>'
						+'</div>'
						+'<dl>'
						+'<dd>'+dataitem['content']+'</dd>'
					if(dataitem['image']!=''){
						var imgs_arr=dataitem['image'].split(',');
						listhtml+='<dd style="margin:5px 0;">'
						for(var key in imgs_arr){
							listhtml+='<img src="__UPLOAD__/'+imgs_arr[key]+'" alt=""/>';	
						}
						listhtml+='</dd>';
						listhtml+='<dd class="photo-viewer"></dd>'
					}	
					listhtml+='<div class="date"><span>'+dataitem['addtime']+'</span> <span></span></div>';
					listhtml+='</dl>';
					if(dataitem['again_content']!=''){
						
						listhtml+='<div style="margin-left:-1px;float:right;margin-top: 9px;width:75%;">追加评价：</div>'
						+'<dl>'
						+'<div style="width: 26%;margin-right: 10px;height:auto;float: left;"></div>'
						+'<dd>'+dataitem['again_content']+'</dd>'
						if(dataitem['again_image']!=''){
							var imgs_arr=dataitem['again_image'].split(',');
							listhtml+='<dd>'
							for(var key in imgs_arr){
								listhtml+='<img src="__UPLOAD__/'+imgs_arr[key]+'" alt="" />';
							}
							listhtml+='</dd>';
						}
						listhtml+='<div class="date"><span>'+dataitem['again_addtime']+'</span> <span></span></div>';
						listhtml+='</dl>';
					}
					listhtml+='</div>';
				}
				$(".comment-con").html(listhtml);
				
			}
		});
	}
	
	
	
	
	$(function () {
		countDown();//计时器

		$.ajax({
			type:"post",
			data : {"shop_id" : "{$shop_id}" , "flag" : "goods" , "goods_id" : "{$goods_id}"},
			url : "APP_MAIN/goods/getShareContents",
			success : function(data){
				//alert(JSON.stringify(data));
				//document.write(data.share_img);
					/* $("#share_title").val(data['share_title']);
					$("#share_desc").val(data['share_contents']);
					$("#share_url").val(data['share_url']);
					$("#share_img_url").val(data['share_img']);\ */
					wx.config({
					    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					    appId: $("#appId").val(), // 必填，公众号的唯一标识
					    timestamp: $("#jsTimesTamp").val(), // 必填，生成签名的时间戳
					    nonceStr:  $("#jsNonceStr").val(), // 必填，生成签名的随机串
					    signature: $("#jsSignature").val(),// 必填，签名，见附录1
					    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
					wx.ready(function () {
					    var title = data['share_title'];
					    var share_contents = data['share_contents']+'\r\n';
					    var share_nick_name = data['share_nick_name']+'\r\n';
					    var desc2 = share_contents+ share_nick_name + "收藏热度：★★★★★";
					    var url = data['share_url'];
					    var img_url = data['share_img'];
					        wx.onMenuShareAppMessage({
					            title: title,
					            desc: desc2,
					            link: url,
					            imgUrl: img_url,
					            trigger: function (res) {
//					                alert('用户点击发送给朋友');
					            },
					            success: function (res) {
//					                alert('已分享');
					           
					            },
					            cancel: function (res) {
					                //alert('已取消');
					            },
					            fail: function (res) {
					                //alert(JSON.stringify(res));
					            }
					        });

					    // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
					        wx.onMenuShareTimeline({
					            title: title,
					            link: url,
					            imgUrl: img_url,
					            trigger: function (res) {
					              // alert('用户点击分享到朋友圈');
					            },
					            success: function (res) {
					                //alert('已分享');
					            
					            },
					            cancel: function (res) {
					                //alert('已取消');
					            },
					            fail: function (res) {
					           //     alert(JSON.stringify(res));
					            }
					        });

					    // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
					        wx.onMenuShareQQ({
					            title: title,
					            desc: desc2,
					            link: url,
					            imgUrl: img_url,
					            trigger: function (res) {
					                //alert('用户点击分享到QQ');
					            },
					            complete: function (res) {
					                //alert(JSON.stringify(res));
					            },
					            success: function (res) {
					                //alert('已分享');
					            	
					            },
					            cancel: function (res) {
					                //alert('已取消');
					            },
					            fail: function (res) {
					                //alert(JSON.stringify(res));
					            }
					        });

					    // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
					        wx.onMenuShareWeibo({
					            title: title,
					            desc: desc2,
					            link: url,
					            imgUrl: img_url,
					            trigger: function (res) {
					                //alert('用户点击分享到微博');
					            },
					            complete: function (res) {
					                //alert(JSON.stringify(res));
					            },
					            success: function (res) {
					                //alert('已分享');
					            
					            },
					            cancel: function (res) {
					                //alert('已取消');
					            },
					            fail: function (res) {
					                //alert(JSON.stringify(res));
					            }
					        });


					})
			
					}
				});
		
		//点赞
		$("#clickGood").one('click',function(){
			var $tempThis= $(this);
			var typeID=1;
			var goods_id = $("#goods_id").val();
			$.ajax({
				url: "{$Think.config.HEIMA_MODULE}/Weishop/click_gs",
				type: "Post",
				asysc: false,
				data: { "goods_id":goods_id,"action":typeID },
				success: function (res) {
					if(res == 1){
						$("#goodNum").text(parseInt($("#hiddenGoodNum").val())+1+"次");  
					}
				},
				error: function () {
				}
			});
			$tempThis.css('background','url(__TEMP__/{$style}/public/images/dianzan2.png) no-repeat 5px 5px');
			$tempThis.attr("is_click",'1');
			$("#collect-link").on("click", function () {
				$("#collect-tip").show();
			})
			$("#a-know").on("click", function () {
				$("#collect-tip").hide();
			})
		})
		
		//分享
		$("#clickShare").on('click',function(){
			$("#share-tip").show();
			var $tempThis= $(this);
			var typeID=2;
			var goods_id = $("#goods_id").val();
			$.ajax({
				url: "APP_MAIN/Weishop/click_gs",
				type: "Post",
				asysc: false,
				data: { "goods_id":goods_id,"action":typeID },
				success: function (res) {
					if(res == 1){
						$("#shareNum").text(parseInt($("#hiddenshareNum").val())+1+"次");
					}
				},
				error: function () {
				}
			});
			$tempThis.css('background','url(__TEMP__/{$style}/public/images/fenxiang2.png) no-repeat 5px 5px');
		})
	})
</script>